import { BugOutlined, DoubleRightOutlined } from "@ant-design/icons"
import { Box } from "@mui/system"
import { Badge, Button } from "antd"
import React, { PropsWithChildren, useMemo, useRef, useState } from "react"
import { Music } from "./icon"
import { useEditorContext } from "@/context/editContext"
import { TAppType } from "@/context/contextType"
export interface GrowSlider extends PropsWithChildren {
  rootClassName?: string
  maxGrow?: string //生长的最大长度
  layout?: "vertical" | "horizontal"
  onTransitionEnd?: () => void
  onTransitionStart?: () => void
}
const MiniMenu = () => {
  const [{ apps }, dispatch] = useEditorContext()
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        width: "100%",
        height: "100%",
        p: 1,
        pb: 0,
      }}
    >
      {apps &&
        Object.keys(apps)?.map((app, index) => {
          const { name, icon, status } = apps[app as unknown as TAppType]
          return (
            <Box
              key={index}
              sx={{
                lineHeight: "normal",
                height: "100%",
                display: "flex",
                justifyContent: "center",
                flexDirection: "column",
                alignItems: "center",
                aspectRatio: 1 / 1,
              }}
            >
              <Box
                onClick={() => {
                  dispatch({ type: "updateMiniApp", payload: app })
                }}
              >
                {icon}
              </Box>
              <Box
                sx={{
                  fontSize: 10,
                  textAlign: "center",
                  display: "flex",
                  alignItems: "center",
                  mt: -0.5,
                }}
              >
                <Badge status={status} />
                <Box sx={{ pl: 0.5, color: "grey" }}>{name}</Box>
              </Box>
            </Box>
          )
        })}
    </Box>
  )
}
const GrowSlider = ({
  rootClassName,
  layout = "vertical",
  children = <MiniMenu></MiniMenu>,
  onTransitionStart,
  onTransitionEnd,
  maxGrow = "min-content",
}: GrowSlider) => {
  const [grow, setGrow] = useState(false)
  const [transitionEnd, setTransitionEnd] = useState(true)
  const miniMode = useMemo(() => {
    return transitionEnd && !grow
  }, [transitionEnd, grow])
  return (
    <Box
      className={rootClassName}
      onTransitionEnd={() => {
        onTransitionEnd?.()
        setTransitionEnd(true)
      }}
      onClick={() => {
        onTransitionStart?.()
        setTransitionEnd(false)
        setGrow(true)
      }}
      sx={{
        position: "absolute",
        top: 0,
        right: 0,
        overflow: "hidden",
        zIndex: 99,
        height: "100%",
        transition: "width",
        width: grow ? maxGrow : "5px",
        display: "flex",
        borderTopLeftRadius: miniMode ? "10px" : undefined,
        borderBottomLeftRadius: miniMode ? "10px" : undefined,
        backgroundColor: miniMode ? "#41b606" : "rgba(255,255,255,0.9)",
        transitionDuration: "0.5s",
        transitionTimingFunction: "cubic-bezier(0.35, 0.62, 0.20, 1.06)",
      }}
    >
      <Box
        sx={{
          height: "100%",
          p: 0.5,
          display: miniMode ? "none" : "flex",
          color: "white",
          backgroundColor: "black",
          borderRight: "1px solid black",
        }}
        onClick={(e) => {
          if (grow) {
            e.stopPropagation()
            onTransitionStart?.()
            setTransitionEnd(false)
            setGrow(false)
          }
        }}
      >
        <DoubleRightOutlined />
      </Box>
      {children}
    </Box>
  )
}

export default GrowSlider
